import React, { Component } from "react";
import HeaderChlassChild from "./HeaderClassChild";
import HeaderFunChild from "./HeaderFunChild";

export default class HeaderClass extends Component {
  state = {
    count: 0,
  };
  cllikc1() {
    console.log("this: ", this);
  }
  cllikc2() {
    console.log("this: ", this);
  }
  cllikc3() {
    console.log("this: ", this);
  }
  cllikc4 = () => {
    console.log("this: ", this);
  };
  cllikc5() {
    console.log("this: ", this);
  }
  cllikc6(num) {
    this.setState({
      count: this.state.count + num,
    });
  }
  changeCount(num) {
    this.setState({
      count: this.state.count - num,
    });
  }
  constructor() {
    super();
    this.cllikc5 = this.cllikc5.bind(this);
  }
  render() {
    return (
      <div>
        HeaderClass
        <h1>{this.state.count}</h1>
        <p>
          <button onClick={this.cllikc1}>点击count,获取this</button>
        </p>
        <p>
          <button onClick={this.cllikc2.bind(this)}>
            点击count,获取this,bind改变this
          </button>
        </p>
        <p>
          <button onClick={() => this.cllikc3()}>
            点击count,获取this,包裹改变this
          </button>
        </p>
        <p>
          <button onClick={this.cllikc4}>
            点击count,获取this,直接定义箭头函数
          </button>
        </p>
        <p>
          <button onClick={this.cllikc5}>
            点击count,获取this,包裹和bind一起使用
          </button>
        </p>
        <p>
          <button onClick={this.cllikc5}>
            点击count,获取this,包裹和bind一起使用
          </button>
        </p>
        <p>
          <button onClick={() => this.cllikc6(3)}>改变count的值</button>
        </p>
        <hr></hr>
        <HeaderChlassChild
          // count={this.state.count}
          changeCount={this.changeCount.bind(this)}
        ></HeaderChlassChild>
        <hr></hr>
        <HeaderFunChild
          // count={this.state.count}
          changeCount={this.changeCount.bind(this)}
        ></HeaderFunChild>
      </div>
    );
  }
}
